<script lang="ts" setup name="Child1">
    import { ref } from 'vue';

    let toy = ref('奥特曼');
    let book = ref(3);

    // 把数据交给外部，这样Father就能访问并修改这里暴漏出去的数据
    defineExpose({ toy, book });

    function minusFatherHouse(parent: any) {
        console.log(parent);
        parent.house -= 1;
    }
</script>

<template>
    <div class="child1">
        <h2>子组件1</h2>
        <div>玩具：{{ toy }}</div>
        <div>书籍：{{ book }}本</div>
        <button @click="minusFatherHouse($parent)">干掉父亲的一套房产</button>
    </div>
</template>

<style scoped>
    .child1 {
        background-color: skyblue;
        border-radius: 10px;
        padding: 5px 10px;
    }
</style>